<template>
  <div class="city_container">
    <scroll-view scroll-y style="height:1334rpx;" :scroll-into-view="scrollLetter">

      <div class="right-letter">
            <span>热门</span>
            <span v-for="(i,k) in letterArr" :key="k" @click="toLetter(i)">{{i}}</span>
      </div>
      <div class="location">
        <span class="chiose-city">{{address}}</span>
        <span class="gps">GPS定位</span>
      </div>
      <div class="hot-city">
        <div class="city-title">热门城市</div>
        <div class="hot-city-container">
          <div v-for="(i,k) in hotCity" :key="k" @click="backToHome(i)">{{i}}</div>
        </div>
        <div class="letter" v-for="(item,key) in cityData" :key="key" :id="item.letter">
          {{item.letter}}
          <ul class="city-list">
            <li v-for="(city,ky) in item.citys" :key="ky" @click="backToHome(city)">{{city}}</li>
          </ul>
        </div>
      </div>

    </scroll-view>
  </div>
</template>

<script>
const cityData = require('@/utils/cityData.js');
const app = getApp();
export default {
  data() {
    return {
        address:'',
        cityData,
        letterArr:["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
        hotCity:['上海','北京','广东','深圳','天津','杭州','南京','苏州','成都','武汉','重庆','西安'],
        scrollLetter:''
    };
  },
  onLoad(options){
    this.address = options.address;
  },
  components: {},
  methods:{
    backToHome(city){
      app.globalData.address = city;
      wx.navigateBack({ delta:2 })
    },
    toLetter(letter){
      this.scrollLetter = letter;
    }
  }
};
</script>

<style scoped>
.location {
  display: flex;
  width: 750rpx;
  height: 90rpx;
  align-items: center;
}
/* 城市标题 */
.city-title{
  font-size: 28rpx;
  color:#aaaaaa;
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-bottom: 18rpx;
}
.chiose-city {
  font-size: 24rpx;
  margin-left: 30rpx;
  margin-right: 20rpx;
}
.gps {
  color: #c0c0c0;
  font-size: 20rpx;
}
.hot-city {
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  width: 750rpx;
  height: 464rpx;
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
}
.hot-city-container {
  margin-left: 28rpx;
  margin-right: 70rpx;
}
.hot-city-container div{
  width: 200rpx;
  height: 70rpx;
  background: white;
  float: left;
  text-align: center;
  margin-right: 8rpx;
  margin-top: 8rpx;
  border:2px solid #dedede;
  line-height: 70rpx;
  font-size: 24rpx;
}
.letter{
  color: #aeaeae;
  font-size: 22rpx;
  margin-left: 30rpx;
  margin-top: 6rpx;
}
.city-list{
  margin-left: 28rpx;
  color: #333333;
}
.city-list li{
  height: 90rpx;
  border-bottom: 1px solid #dedede;
  line-height: 90rpx;
  font-size: 24rpx;
}
/* 右侧的字母 */
.right-letter{
  width: 40rpx;
  position:fixed;
  right: 20rpx;
  top:200rpx;
  display: flex;
  flex-direction: column;
  font-size: 18rpx;
  color: #515b67;
  
}
.right-letter span{
  text-align: center;
  margin-bottom: 4rpx;
}
</style>
